<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="wild">
  <meta name="description" content="" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <title>trade login</title>
  <link rel="stylesheet" type="text/css" href="/static/css/common.css">
  <link rel="stylesheet" type="text/css" href="/static/css/trade.css">

  <script type="text/javascript" src="/static/js/lib/jquery/3.2.1/jquery.js"></script>
  <script type="text/javascript" src="/static/js/util/consts.js"></script>
  <script type="text/javascript" src="/static/js/util/config.js"></script>
  <script type="text/javascript" src="/static/js/util/common.js"></script>
  <script type="text/javascript" src="/static/js/util/frame.js"></script>
  <script type="text/javascript" src="/static/js/modules/trade.js"></script>

  <script type="text/javascript">
    pageConfiguration.needAuth = true;

    var verifyUrl;
    var randNum = '0.903' + new Date().getTime();

    function onload() {
      renderTradeMenu(1);

      $.ajax({
        url: GlobalConfig.serverUrl + '/api/trade/queryVerifyCodeUrl',
        type: 'GET',
        headers: getRequestHeaders(),
        error: function(xhr) {
          var message = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'error';
          $('.error-message', loginForm).text(message);
        },
        success: function(result) {
          verifyUrl = result.message;
          reloadVerifyCode();
        }
      });

      var loginForm = $('#login-form');
      $('input[name="randNum"]', loginForm).val(randNum)
      loginForm.on('submit', function() {
        $.ajax({
          url: GlobalConfig.serverUrl + '/api/trade/login',
          type: 'POST',
          data: loginForm.serialize(),
          headers: getRequestHeaders(),
          error: function(xhr) {
            var message = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'error';
            $('.error-message', loginForm).text(message);
          },
          success: function(result) {
            $('.error-message', loginForm).text(result.message);
            if (result.message !== 'success') {
              reloadVerifyCode();
            }
          }
        });
        return false;
      });

      $('#img-verify-code').on('click', function() {
        reloadVerifyCode();
      });

    }

    function reloadVerifyCode() {
        var img = $('#img-verify-code');
        img.attr('src', verifyUrl + randNum + '&_ra=' + Math.random());
    }

  </script>

</head>

<body>
  <div id="head" class="head"></div>

  <div class="container">
    <div class="innerBox">
      <div class="backStage">
        <ul class="menu-nav">
        </ul>

        <div>
          <form id="login-form">
            <div class="login-content">
              <div class="login-border">
                <div class="form-group">
                  <div class="label" data-key="phone_email">交易账户id</div>
                  <input name="userId" type="text" class="txt_input" required="required" pattern="[0-9]+" maxlength="12" placeholder="交易账户id" />
                </div>
                <div class="form-group">
                  <div class="label" data-key="_password">密码</div>
                  <input name="password" type="password" class="txt_input" required="required" minlength="6" maxlength="16" placeholder="请输入密码" />
                </div>
                <div class="form-group">
                  <div class="label" data-key="phone_email">验证码</div>
                  <input name="randNum" type="hidden" />
                  <input name="identifyCode" type="text" class="txt_input" required="required" pattern="[0-9_]{4}"  maxlength="4" placeholder="验证码" autocomplete="off" />
                </div>
                <div class="form-group">
                  <div class="g-verify-code">
                    <img id="img-verify-code" />
                    <span>点击图片刷新验证码</span>
                  </div>
                </div>
                <div class="form-group">
                  <div class="right-field">
                    <input type="submit" class="sub-button" data-key="login" value="登录" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="right-field">
                    <div class="error-message"></div>
                  </div>
                </div>
              </div>
            </div>
          </form>

        </div>

      </div>
    </div>
  </div>
  <div id="foot" class="foot"></div>

</body>

</html>
